让移动端页面滚动更丝滑的better

2023-04-15 18:04| 来源: 网络整理| 查看: 265

在移动端页面中，长列表是非常常用的组件之一，除了考虑到高度适配的问题，还要考虑如何让列表滚动时更加平滑。

利用 better-scroll 可以为移动端（PC 也支持）各种滚动场景提供丝滑的滚动效果。

better-scroll 支持的滚动的形式也有多种：

效果

安装和引入

安装：

npm install @better-scroll/core --save 复制代码

或者：

yarn add @better-scroll/core 复制代码

引入：

import BScroll from '@better-scroll/core' 复制代码代码实现

better-scroll 操作比较简单，核心语句是：

let bs = new BetterScroll('.wrapper', {}) 复制代码

默认情况下，第二个参数可以省略，如果需要配置一些其它方向、带有效果的滚动，需要初始化的时候传入第二个参数。

可选参数如下：

其它细节可以参考 better-scroll 中文文档

整体代码：

constructor(props) { this.state = { list:[] } axios({ url: 'https://...', method:'get' }).then(res=>{ this.setState({ list: res.data.data },()=> { new BetterScroll('.wrapper') // 不需要在这里更新，因为异步代码中setState表现为同步 }) }).catch(err=>{}) } render() { return { { this.state.list.map(item=>{ return {item.name} }) } } 复制代码注意事项

实现better-scroll，外层 wrapper 容器内部一定要有className="content"这一层结构，否则可能会无法滚动。

如果是在 React 中要注意一点， setState 是异步的，要 DOM 创建完成后再创建实例。比如：

或者在 setTimeout 中：

如果数据是接口请求回来的，可以直接放在setState外面。React 异步代码中 setState 表现为同步

【本文地址】

公司简介

联系我们